I'm trying to tell the user "No result!" when there's no match with their search. But i couldn't make it work.
enter code here
let END_POINT = `https://api.tvmaze.com/search/shows?q=${inputValue}`
fetch(END_POINT)
.then(response => {
if (response.status === 200) {
return response.json()
}
// throw new Error("No result!")
return Promise.reject(response)
})
.then(data => {
//initial cotent in the content container
showContent(data[0])
//forEach, display content for each click
data.forEach(tvShow => {
displayContent(tvShow)
})
})
.catch(error => {
console.log(error)
})<div class="header">
<div class="title">TV shows search engine</div>
<div class="form">
<form action="">
<input type="text" name="" id="" placeholder="Dune">
<button type="submit">Search</button>
</form>
<p class="error">No result!</p>
</div>
</div>Any advise how to solve this?
Check is data.length > 0 before printing results:
let END_POINT = `https://api.tvmaze.com/search/shows?q=${inputValue}`
fetch(END_POINT)
.then(response => {
if (response.status === 200) {
return response.json()
}
// throw new Error("No result!")
return Promise.reject(response)
})
.then(data => {
if(data.length> 0) {
//initial cotent in the content container
showContent(data[0])
//forEach, display content for each click
data.forEach(tvShow => {
displayContent(tvShow)
});
} else {
console.log("No result !");
}
})
.catch(error => {
console.log(error)
})